<script setup lang="ts">
import { apiCollectAdd } from "@/apis/collect";
import { apiAddFollow } from "@/apis/my";
import {
  apiProductAuth,
  apiProductDetails,
  apiProductEdit,
  apiProductRemove,
} from "@/apis/product";
import { router, toast } from "@/utils/tools";
import { onLoad } from "@dcloudio/uni-app";
import { onShow } from "@dcloudio/uni-app";
import _default from "pinia-plugin-persistedstate";
import { ref, reactive, onMounted, watch, watchEffect } from "vue";
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
const noScroll = ref(false)
const qrcode2 = ref();
const detailId = ref(0);
const productDetail = reactive<any>({
  qrcode: "https://www.stoneplayer.com/yuehui/index.html",
});
const productQrcodeContent = ref();
let popup = ref({}); // state 1-待提交 2-在售  3-已售 4-下架
// 删除弹窗
const validatePopup = ref(false);
// 平台已认证弹窗
const attestationPopup = ref(false);
// 管理弹窗
let managePopup = ref(true);

const isCompltete = ref(false);
const qrcode = ref(null);
let qrcodeOptions = ref({
  margin: 10,
});
//类型 是从个人中心还是首页跳转
let type = ref("index");
// 详情a
const getDetail = async () => {
  let res = await apiProductDetails({ id: detailId.value });
  if (res.code == 500) {
    toast("系统错误");
    setTimeout(() => {
      uni.navigateBack({
        delta: 1,
      });
    }, 1000);
  }
  Object.assign(productDetail, res.data);
  productDetail.images = productDetail.images.split(",");
  productDetail.dict = JSON.parse(productDetail.dict);
};
const handleComplete = (e: any) => {
  isCompltete.value = e.success;
};
const handleSaveQrcode = (e: any) => {
  if (false === isCompltete.value) {
    toast("二维码未加载完成！");
    return false;
  }

  qrcode.value.save({
    success: (res: any) => {
      //console.log("保存成功----", res);
      if (res.errMsg == "saveImageToPhotosAlbum:ok") {
        toast("保存成功！");
        return false;
      }
    },
  });
};

// 关注
const handleFollow = async () => {
  isLoginChange();
  // 防抖
  uni.$uv.debounce(addFollow(), 500);
  //console.log("点击了关注");
};
const addFollow = async () => {
  let res = await apiAddFollow({
    appFollowId: productDetail.appUserId,
  });
  //console.log("关注成功-------", res);

  if (res.code == 200) {
    toast("关注成功！");
    getDetail();
  }
};
const handleDetail = () => {
  router(`/pagesMerchand/store?shopId=${productDetail.appUserId}`);
};
onShow(() => {
  getDetail();
});
onLoad((options: any) => {
  //console.log("=-====详情-------", options);
  detailId.value = options.id ?? "";
  type.value = options.type ?? "index";
});

const isLoginChange = () => {
  if (!uni.getStorageSync("token")) {
    router("/pages/login/login");
    return;
  }
};

const handleLook = async () => {
  attestationPopup.value.open(true);
  let data = {
    title: productDetail.title,
    describes: productDetail.describes,
    images: productDetail.images,
    brand: productDetail.brand,
    fineness: productDetail.fineness,
    types: productDetail.types,
  };
  productQrcodeContent.value = JSON.stringify(data);
};
const handleAddCollect = async () => {
  isLoginChange();
  if (productDetail.collect) {
    toast("您已收藏！");
    return false;
  }
  let res = await apiCollectAdd({ commodityId: productDetail.id });
  if (res.code == 200) {
    getDetail();
    toast("收藏成功！");

    return false;
  }
};

const byClick = () => {
  isLoginChange();
  uni.navigateTo({
    url: `/pagesOrder/order/confirmOrder?orderId=${productDetail.id}`,
  });
};

// 点击管理
const manageClick = () => {
  isLoginChange();
  managePopup.value.open(true);
};
// 藏品认证
const collectionClick = () => {
  uni.navigateTo({
    url: `/pagesMerchand/collection-certification`,
  });
};

const handleAuthentication = () => {
  if (
    type.value === "my" &&
    userStore.userInfo.id === productDetail.appUserId
  ) {
    if (productDetail.authentication) return;
    uni.navigateTo({
      url: `/pagesMerchand/collection-certification?productId=${productDetail.id}`,
    });
  }
};

// 编辑
const compileClick = () => {
  managePopup.value.close();
  uni.navigateTo({
    url: `/pagesMerchand/info-edit?id=${productDetail.id}`,
  });
};
// 下架
const handleOut = async (state) => {
  let res = await apiProductEdit({ id: productDetail.id, state });
  if (res.code == 200) {
    getDetail();
    toast(state === 4 ? "下架成功！" : "上架成功！");
    setTimeout(() => {
      uni.navigateBack({
        delta: 1,
      });
    }, 1000);
    return false;
  }
};
// 删除
const handleDelete = async () => {
  let res = await apiProductRemove({ id: productDetail.id });
  if (res.code == 200) {
    getDetail();
    toast("删除成功！");
    setTimeout(() => {
      uni.navigateBack({
        delta: 1,
      });
    }, 1000);
    return false;
  }
};
const change = (e:any) =>{
  //console.log(e, '弹框----')
  noScroll.value = e.show
}
onMounted(() => {

});
</script>

<template>
  <view class="detail-wrapper" id="detail-wrapper" :class="!noScroll?'detail-wrapper':'noscroll'">
    <view class="row-box info-box crosswise">
      <view class="info-left">
        <image :src="productDetail.headSculpture" class="img" />
      </view>
      <view class="info-right">
        <view class="flex flex-between">
          <text @click="handleDetail">{{ productDetail.shopName }}</text>
          <button
            v-if="!productDetail.follow && type !== 'my'"
            @click="handleFollow"
            class="follow"
          >
            关注
          </button>
        </view>
        <view class="store-name crosswise">
          <image src="../static/images/shop-2.png" class="img" />
          <text class="text">{{ productDetail.personalProfile }}</text>
        </view>
      </view>
    </view>
    <view class="row-box details-box">
      <view class="details-title">{{ productDetail.title }}</view>
      <view class="introduce-box">
        <view class="crosswise-sp margin-box">
          <view class="price-box">
            <text class="price-ico">￥</text>
            <text class="price-text">{{ productDetail.currentPrice }}</text>

          </view>
          <view class="gray-box">
            <text>{{ productDetail.num }}人收藏</text>
          </view>
        </view>
        <view class="gray-box">宝贝位置：{{ productDetail.address }}</view>
      </view>
      <view class="menu-list">
        <view
          class="menu-box flex flex-between"
          v-for="item in productDetail.dict"
        >
          <text>{{ item.fieldName }}:</text>
          <text class="red-box">{{ item.name }}</text>
        </view>
      </view>
      <view class="introd-text"></view>
      <view class="img-list">
        <image
          :src="item"
          mode="scaleToFill"
          v-for="item in productDetail.images"
        />
      </view>
    </view>
  </view>
</template>

<style lang="scss">
page {
  padding: 24rpx 30rpx 200rpx;
  box-sizing: border-box;
  background: #f7f7f7;
}
.noscroll{
  position: fixed;
}

.info-box {
  .info-left {
    margin-right: 20rpx;

    .img {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 1);
      box-shadow: 6rpx 6rpx 2rpx 0rpx rgba(0, 0, 0, 0.1);
    }
  }

  .info-right {
    color: rgba(51, 51, 51, 1);
    font-size: 32rpx;
    width: 100%;

    .follow {
      background: linear-gradient(
        0deg,
        rgba(191, 1, 3, 1),
        rgba(255, 84, 2, 1)
      );
      width: 120rpx;
      height: 46rpx;
      font-size: 28rpx;
      font-weight: 600;
      border-radius: 6rpx;
      color: #ffffff;
      border: 0rpx solid rgba(187, 187, 187, 1);
    }

    .store-name {
      margin-top: 8rpx;

      .img {
        width: 27rpx;
        height: 27rpx;
        margin-right: 14.5rpx;
      }

      .text {
        font-size: 28rpx;
      }
    }
  }
}

.approve-box {
  margin-top: 24rpx;
  font-size: 28rpx;

  .left-approve {
    color: rgba(154, 154, 154, 1);

    .state-text {
      color: rgba(51, 51, 51, 1);
      font-size: 32rpx;
    }
  }

  .right-approve {
    .no-auth{
      min-width: 300rpx;
      text-align: right;
    }
    text {
      color: rgba(191, 1, 3, 1);
    }

    image {
      width: 28rpx;
      height: 28rpx;
      margin-left: 8rpx;
    }
  }
}

.details-box {
  margin-top: 24rpx;

  .details-title {
    margin-bottom: 40rpx;
    padding-bottom: 27rpx;
    color: rgba(16, 16, 16, 1);
    font-size: 32rpx;
    border-bottom: 2rpx solid rgba(239, 239, 239, 1);
  }

  .introduce-box {
    margin-bottom: 30rpx;

    .margin-box {
      margin-bottom: 20rpx;
    }

    .price-box {
      .price-ico {
        color: rgba(243, 96, 78, 1);
        font-size: 24rpx;
      }

      .price-text {
        margin-right: 12rpx;
        color: rgba(243, 96, 78, 1);
        font-size: 40rpx;
      }

      .original-cost {
        text-decoration: line-through;
      }
    }

    .gray-box {
      color: rgba(206, 206, 206, 1);
      font-size: 24rpx;
    }
  }

  .menu-list {
    margin-bottom: 30rpx;

    .menu-box {
      margin-bottom: 10rpx;
      padding: 20rpx 30rpx;
      border-radius: 8rpx;
      background-color: rgba(239, 239, 239, 1);
      border: 0rpx solid rgba(187, 187, 187, 1);
      color: rgba(108, 108, 108, 1);
      font-size: 28rpx;

      .red-box {
        color: rgba(191, 1, 3, 1);
      }
    }
  }
}

.introd-text {
  margin-bottom: 30rpx;
  color: rgba(79, 79, 79, 1);
  font-size: 28rpx;
}

.img-list {
  image {
    width: 642rpx;
    height: 426.94rpx;
    margin-bottom: 5rpx;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
  }
}

.btn-box {
  .collect-box {
    image {
      width: 48rpx;
      height: 48rpx;
      margin-right: 10rpx;
    }

    text {
      color: rgba(108, 108, 108, 1);
      font-size: 28rpx;
    }
  }

  .handle-btn {
    button {
      width: 172rpx;
      height: 72rpx;
      line-height: 40rpx;
      border-radius: 50rpx 0rpx 0rpx 50rpx;
      background: rgba(255, 255, 255, 1);
      color: rgba(191, 1, 3, 1);
      font-size: 28rpx;
      border: 2rpx solid rgba(191, 1, 3, 1);
    }

    .buy-btn {
      margin-left: 6rpx;
      border-radius: 0rpx 50rpx 50rpx 0rpx;
      background: linear-gradient(
        0deg,
        rgba(191, 1, 3, 1) 0%,
        rgba(255, 84, 2, 1) 99.2%
      );
      color: rgba(255, 255, 255, 1);
      border: 0rpx solid rgba(187, 187, 187, 1);
    }
  }
}

.validate {
  padding: 40rpx;

  .icon {
    margin-bottom: 20rpx;
    width: 114rpx;
    height: 114rpx;
    border-radius: 50%;
    background-color: #fef3f2;

    .icon2 {
      width: 81rpx;
      height: 81rpx;
      border-radius: 50%;
      background-color: #fee4e2;
    }

    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .title {
    font-size: 32rpx;
    font-weight: 700;
    margin-bottom: 20rpx;
  }

  .content {
    color: #6c6c6c;
    font-size: 28rpx;
  }

  .pop-btn {
    margin-top: 61rpx;

    button {
      flex: 0.46;
      height: 80rpx;
      border-radius: 16rpx;
      background-color: rgba(255, 255, 255, 1);
      font-size: 28rpx;
    }

    .cancel {
      border: 2rpx solid rgba(154, 154, 154, 1);
      color: rgba(79, 79, 79, 1);
    }

    .confirm-del {
      background: linear-gradient(
        180deg,
        rgba(255, 84, 2, 1) 0%,
        rgba(191, 1, 3, 1) 99%
      );
      color: rgba(255, 255, 255, 1);
    }
  }

  .title-pop {
    margin-bottom: 40rpx;

    .head-img {
      .img {
        width: 80rpx;
        height: 80rpx;
        margin-right: 21rpx;
        border-radius: 50%;
      }
    }

    .title-text {
      text {
        color: rgba(16, 16, 16, 1);
        font-size: 24rpx;

        &:first-child {
          margin-top: 4rpx;
          font-size: 32rpx;
        }
      }
    }
  }

  .describe-box {
    margin-bottom: 20rpx;
    color: rgba(16, 16, 16, 1);
    font-size: 32rpx;
  }

  .qr-code {
    width: 560rpx;
    height: 560rpx;
    margin-bottom: 80rpx;
    border: 2rpx solid rgba(206, 206, 206, 1);

    .img {
      width: 100%;
      height: 516rpx;
      border-radius: 12rpx;
      background-color: rgba(255, 255, 255, 1);
      border: 2rpx solid rgba(206, 206, 206, 1);
    }
  }

  .save-btn {
    button {
      height: 80rpx;
      line-height: 40rpx;
      border-radius: 50rpx;
      background: linear-gradient(
        0deg,
        rgba(191, 1, 3, 1) 0%,
        rgba(255, 84, 2, 1) 99.2%
      );
      color: rgba(255, 255, 255, 1);
      font-size: 28rpx;
      text-align: center;
      font-family: Roboto;
      border: 0rpx solid rgba(187, 187, 187, 1);
    }
  }

  .manage-row {
    padding: 30rpx 0;
    border-bottom: 2rpx solid rgb(230, 229, 229);
    color: rgba(108, 108, 108, 1);
    font-size: 28rpx;
    text-align: center;

    &:last-child {
      border-bottom: 0;
      padding: 30rpx 0 0 0;
    }
  }
}
</style>
